<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>放大镜</title>
<script src="http://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script>
<style>
*{margin:0;padding:0;}
#out{width:400px;height:400px;position:relative;}

#small-pic{width:400px;height:400px;position:relative;}
#big-pic{width:500px;height:500px;overflow:hidden;
position:absolute;left:520px;top:-5px;display:none;}
#small-pic img{width:400px;height:400px;position:absolute;}

#min-pic img{width:100px;height:100px;border:1px solid #fff;}
#min-pic .minpic{border:1px solid #000;}
#minp02{margin:0 1px;}
#minp01{float:left;}
#minp02{float:left;}
#minp03{float:left;}
#min-pic{height:102px;margin-top:1px;}
#mack{width:200px;height:200px;border:1px solid #000;
display:none;position:absolute;left:0;top:0;z-index:2;opacity:0.5;
background:#494949;cursor:move;}
#big-pic img{position:absolute;}

</style>
</head>
<body>
<div id="out">
	<div id="small-pic">
		<span id="mack"></span>
		<img id="smallp01" class="smallpic" src="img/001.jpg"/>
		
	</div>
	<div id="min-pic">
		<img id="minp01" class="minpic" src="img/001.jpg"/>
		<img id="minp02" src="img/002.jpg"/>
		<img id="minp03" src="img/003.jpg"/>
	</div>
	<div id="big-pic">
		<img id="bigp01" class="bigpic" src="img/001.jpg"/>
		
	</div>
</div>
</body>
<script>
  
$("#min-pic img").mousemove(function(){
	var iIndex = $(this).index(),
	    iSrc = $(this).attr("src");
	    
	$("#min-pic img").removeClass("minpic").eq(iIndex).addClass("minpic");
	$("#smallp01").attr("src",iSrc);
	$("#bigp01").attr("src",iSrc);
})
$("#small-pic").mouseover(function(){
	$("#mack").css("display","block");
	$("#big-pic").css("display","block");
	$("#small-pic").mousemove(function(e){
	var evn = e || window.event;
	var x = evn.clientX  - $("#mack").width()/2;
	var y = evn.clientY  - $("#mack").height()/2;
	 
		if(x < 0){
			x = 0;
		}else if(x > $("#small-pic").width() - $("#mack").outerWidth()){
			x = $("#small-pic").width() - $("#mack").outerWidth();
		}
		if(y < 0){
			y = 0;
		}else if(y > $("#small-pic").height() - $("#mack").outerHeight()){
			y = $("#small-pic").height() - $("#mack").outerWidth();
		}
		$("#mack").css({left:x,top:y});
		
		var percentX = x/($("#small-pic").width() - $("#mack").width());
		var percentY = y/($("#small-pic").height() - $("#mack").height());
		
		
			$("#bigp01").css({left:-percentX*($("#bigp01").width()-$("#big-pic").width()),top:-percentY*($("#bigp01").height()-$("#big-pic").height())});
			
		
		
		
})
}).mouseout(function(){
	$("#mack").css("display","none");
	$("#big-pic").css("display","none");
})
	
	
		
	


</script>
</html>